import SwiftUI

struct ListViewDemo: View {
    var body: some View {
        // 不要在 body 里面写界面细节
        // 写结构
        // Big title
        makeBigTitle()
        
        // Sub title
        makeSubTitle()
        
        // Description
        makeDescription()
        
        // Demo View
        makeDemoView()
    }
}

extension ListViewDemo {
    // some View 描述显示在屏幕上的某种界面
    func makeBigTitle() -> some View {
        // Text - SwiftUI 里要显示在界面上的文字
        Text("List") // View
            .font(.largeTitle) // Modifer
            .padding(.bottom, 10)
        
    }
    
    func makeSubTitle() -> some View {
        // Text - SwiftUI 里要显示在界面上的文字
        Text("Introduction")
            .foregroundColor(.gray)
            .font(.title2)
        
    }
    
    func makeDescription() -> some View {
        Text("List different items vertically. List is a push-out view.")
            .padding()
            .foregroundColor(.white)
            .frame(maxWidth: .infinity)
            .background(Color.orange)
    }
    
    func makeDemoView() -> some View {
        List {
            ListRow(icon: "person.circle.fill", label: "Default View")
            ListRow(icon: "person.circle", label: "Template View")
            ListRow(icon: "person.circle", label: "HStack View")
            ListRow(icon: "person.circle", label: "VStack View")
            ListRow(icon: "person.circle", label: "ZStack View")
            ListRow(icon: "person.circle", label: "List View")
        }
        .border(.brown, width: 2)
    }
}

struct ListRow: View {
    let icon: String
    let label: String

    var body: some View {
        HStack {
            // Icon
            Image(systemName: icon)
            
            // Text
            Text(label)
        }
    }
}







